<template>
  <div>
    <ul class="language-ul">
      <!-- eslint-disable-next-line -->
      <li
        v-for="(language, index) in languages"
        v-show="language.displayName!==currentLanguage.displayName"
        :key="index"
        @click="changeLanguage(language.name)"
      >
        <el-tooltip
          :content="language.displayName"
          placement="bottom"
        ><a><i :class="language.icon" /></a></el-tooltip>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'LanguageSwitch',
  computed: {
    languages() {
      return abp.localization.languages.filter(val => {
        return !val.isDisabled
      })
    },
    currentLanguage() {
      return abp.localization.currentLanguage
    }
  },
  methods: {
    changeLanguage(languageName) {
      abp.utils.setCookieValue(
        'Abp.Localization.CultureName',
        languageName,
        new Date(new Date().getTime() + 5 * 365 * 86400000), // 5 year
        abp.appPath
      )
      location.reload()
    }
  }
}
</script>
<style>
.language-ul {
  text-align: center;
  margin-top: 10px;
}
.language-ul li {
  display: inline;
  margin: 2px;
}
.famfamfam-flags {
  display: inline-block;
}
</style>

